<template>
  <div>
    <el-table
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="Consultants"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="stuName"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="stuUsername"
          label="用户名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="identity"
          label="身份"
          width="180"
          :formatter="identityFormatter">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
          >安排值班</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        v-model="dialogVisible"
        title="值班安排"
        width="30%"
        v-if="dialogVisible"
        :before-close="handleClose"
    >
      <el-form :model="rotaTable" ref="addTime" :rules="rotaTableRule">
        咨询师姓名：
        <el-form-item>
          <span>{{rotaTable.RealName}}</span>
        </el-form-item>
        时间段：
        <br>
        <el-form-item>
          工作日
          <el-select v-model="rotaTable.Time.Week" @change="getDict_Time">
            <el-option
                v-for="item in timeDict_Week"
                :label="item"
                :value="item"
                :key="item"></el-option>
          </el-select>
          <br>
          <br>
          时间段
          <el-select v-model="rotaTable.Time.Time" @change="getTimeId">
            <el-option
                v-for="item in timeDict_Time"
                :label="item"
                :value="item"
                :key="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit"
        >提交</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {deleteByWeekdayAndTime, getTimeByWeekday, getWeekday, submitTime,getIdByWeekdayAndTime} from "../../api/time";
import {ElMessage} from "element-plus";
import {getConsultants,getWorkers} from "../../api/user";
import {addRota} from "../../api/rota";

export default {
  name: "rotaManagement",
  data(){
    return{
      result:{
        teaId:'',
        timeId:'',
        teacherType:'',
        teaName:''
      },
      rotaTable:{
        teacherType:'',
        RealName:'',
        consultantId:'',
        timeId:'',
        Time:{
          Time:'',
           Week:''
      }},
      timeDict_Week:[],
      timeDict_Time:[],
      rotaTableRule:{},
      Consultants:[],
      Workers:[],
      addTime: {weakDay:'',
        timeDay:''},
      dialogVisible: false,
      tableData:[],
      Weekday:'',
      Time: [],
      List: [],
      currentRow: null,
      addRule:{
        timeDay: [{required: true, message: '请输入时间', trigger: 'blur'}]
      }
    }
  },
  created() {
    this.getWeek()
    this.getTeachers()
    this.getSingleTimeDict_Week()
  },
  methods: {
    getTeachers(){
      getWorkers().then(res=>{
        console.log(res)
        if(res.code === 1){
          this.Consultants = res.data
        } else {
          ElMessage.error(res.message)
        }
      })
    },
    getWeek(){
      getWeekday().then(res=>{
        if(res.code === 1){
          this.tableData = res.data
          console.log(this.tableData)
        }
      })
    },
    getTime(e){
      getTimeByWeekday(e).then(res=>{
        if(res.code === 1){
          console.log(res)
          this.Time = res.otherData.result
          console.log(this.Time)
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    handleEdit(index,row){
      this.dialogVisible = true
      this.rotaTable.RealName = row.stuName
      this.rotaTable.teacherType = row.identity
      this.rotaTable.consultantId = row.id
      console.log(row)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    async handleSubmit(){
      console.log(this.rotaTable)
      this.result.timeId = this.rotaTable.timeId
      this.result.teacherType = this.rotaTable.teacherType
      this.result.teaId = this.rotaTable.consultantId
      this.result.teaName = this.rotaTable.RealName
      console.log(this.result)
      addRota(this.result).then(res=>{
        console.log(res)
        if(res.code === 1){
          ElMessage.success(res.message)
          this.dialogVisible = false
        } else {
          this.dialogVisible = false
          ElMessage.error(res.message)
        }
      })
    },
    handleOpen(){
      this.dialogVisible = true
      this.addTime.weakDay = this.Weekday
      console.log(this.addTime.weakDay)
    },
    identityFormatter(x){
      if(x.identity === 1){
        return '学生'
      } else if(x.identity === 2){
        return '咨询师'
      } else if(x.identity === 5) {
        return '初访师'
      } else {
        return '未知'
      }
    },
    async getDict_Time(e){
      await getTimeByWeekday(e).then(res=>{
        if(res.code === 1){
          this.timeDict_Time = res.data
        }
      })
      if (this.rotaTable.Time.Time){
        this.getTimeId()
      }
    },
    getSingleTimeDict_Week(){
      getWeekday().then(res=>{
        if(res.code === 1){
          this.timeDict_Week = res.data
        }
      })
    },
    getTimeId(){
      getIdByWeekdayAndTime(this.rotaTable.Time.Week,this.rotaTable.Time.Time).then(res=>{
        console.log(res)
        if(res.code === 1){
          this.rotaTable.timeId = res.data
        } else {
          ElMessage.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>